<template>
	<div>
		<main-content
			classType="wrapInner"
			:tableHeight.sync="tableHeight"
			:otherDependenComponents="otherDependenComponents"
		>
			<template slot="query">
				<el-form
					ref="form"
					:model="form"
					:inline="true"
					label-width="auto"
					label-suffix=":"
				>
					<el-form-item label="所属商户" prop="merchantId">
						<merchant-select
							v-model="form.merchantId"
							:placeholder="$t('common.select_all')"
						></merchant-select>
					</el-form-item>

					<el-form-item label="会员账号" prop="username">
						<el-input
							v-model.trim="form.username"
							clearable
							maxlength="11"
							size="medium"
						/>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							:loading="loading"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							icon="el-icon-plus"
							size="medium"
							@click="handleAdd"
							v-if="hasPermission('90750056')"
						>
							{{ $t('common.add') }}
						</el-button>
					</el-form-item>
				</el-form>
			</template>
			<template slot="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					:data="tableData"
					style="width: 100%"
					:max-height="tableHeight"
					highlight-current-row
					:header-cell-style="getRowClass"
					class="small-size-table"
				>
					<el-table-column
						prop="username"
						align="center"
						label="会员账号"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.username || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="merchantName"
						align="center"
						label="所属商户"
						min-width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.merchantName || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="dailyCount"
						align="center"
						show-overflow-tooltip
						min-width="100"
					>
						<template slot="header">
							<div>线上提款</div>
							<div>每日提款次数</div>
						</template>
						<template slot-scope="scope">
							<span>{{ scope.row.dailyCount || 0 }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="dailyAmount"
						align="center"
						show-overflow-tooltip
						min-width="150"
					>
						<template slot="header">
							<div>线上提款</div>
							<div>每日累计提款额度</div>
						</template>
						<template slot-scope="scope">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.dailyAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="proxyDailyCount"
						align="center"
						show-overflow-tooltip
						min-width="150"
					>
						<template slot="header">
							<div>通过代理提款</div>
							<div>每日提款次数</div>
						</template>
						<template slot-scope="scope">
							<span>{{ scope.row.proxyDailyCount || 0 }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="proxyDailyAmount"
						align="center"
						show-overflow-tooltip
						min-width="150"
					>
						<template slot="header">
							<div>通过代理提款</div>
							<div>每日累计提款额度</div>
						</template>
						<template slot-scope="scope">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.proxyDailyAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="bigAmount"
						align="center"
						label="大额标记金额"
						min-width="120"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.bigAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="trcVirtualFee"
						align="center"
						show-overflow-tooltip
						min-width="150"
					>
						<template slot="header">
							<div>虚拟币提现手续费</div>
							<div>TRC20协议</div>
						</template>
						<template slot-scope="scope">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.trcVirtualFee
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="ercVirtualFee"
						align="center"
						show-overflow-tooltip
						min-width="150"
					>
						<template slot="header">
							<div>虚拟币提现手续费</div>
							<div>ERC20协议</div>
						</template>
						<template slot-scope="scope">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.ercVirtualFee
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="bankCardFee"
						align="center"
						label="银行卡提现手续费"
						min-width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.bankCardFee
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="bmhFee"
						align="center"
						label="白马会提现手续费"
						min-width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.bmhFee
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="bmhFee"
						align="center"
						label="易换提现手续费"
						min-width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.yhFee
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="creator"
						align="center"
						label="创建人"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.creator || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="createdAt"
						align="center"
						label="创建时间"
						min-width="180"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.createdAt || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="operator"
						align="center"
						label="最后操作人"
						min-width="100"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.operator || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="updatedAt"
						align="center"
						label="最后操作时间"
						min-width="180"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.updatedAt || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						fixed="right"
						align="center"
						label="操作"
						min-width="200"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<el-button
								type="text"
								@click="handleEdit(scope.row)"
								v-if="hasPermission('403031')"
							>
								编辑
							</el-button>
							<el-button
								v-if="
									scope.row.username !== '默认' &&
										hasPermission('90750057')
								"
								type="text"
								@click="handleDel(scope.row)"
								:loading="scope.row.loading"
							>
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					v-show="!!total"
					class="pageValue"
					:current-page.sync="pageNum"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					:pager-count="9"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</template>
		</main-content>
		<el-dialog
			:title="ruleFormType === 'add' ? '新增' : '编辑'"
			:visible.sync="dialogRuleFormVisible"
			width="500px"
			:close-on-click-modal="false"
			@close="handleCloseRuleFormDialog('ruleForm')"
		>
			<el-form
				:model="ruleForm"
				v-loading="ruleFormLoading"
				:rules="rules"
				ref="ruleForm"
				label-width="auto"
				class="demo-ruleForm"
			>
				<div v-if="isDefault">
					<el-form-item label="默认" required></el-form-item>
				</div>
				<div v-if="isDefault">
					<el-form-item label="所属商户" required>
						<merchant-select
							v-model="ruleForm.merchantId"
							clearable
							:disabled="ruleFormType === 'edit'"
							:placeholder="$t('common.please_choose')"
							class="input-class"
						></merchant-select>
					</el-form-item>
				</div>
				<div v-else>
					<el-form-item label="会员账号:" prop="username">
						<el-input
							v-model.trim="ruleForm.username"
							placeholder="请输入"
							:disabled="ruleFormType === 'edit'"
							clearable
							class="input-class"
						/>
					</el-form-item>
					<el-form-item label="所属商户:" prop="merchantId">
						<merchant-select
							v-model="ruleForm.merchantId"
							clearable
							:disabled="ruleFormType === 'edit'"
							:placeholder="$t('common.please_choose')"
							class="input-class"
						></merchant-select>
					</el-form-item>
				</div>

				<el-form-item label="线上提款-每日提款次数:" prop="dailyCount">
					<el-input
						v-model.trim="ruleForm.dailyCount"
						placeholder="请输入"
						maxlength="5"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
				</el-form-item>
				<el-form-item
					label="线上提款-每日累计提款额度:"
					prop="dailyAmount"
				>
					<el-input
						v-model.trim="ruleForm.dailyAmount"
						placeholder="请输入"
						maxlength="10"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
				</el-form-item>

				<el-form-item
					label="通过代理提款-每日提款次数:"
					prop="proxyDailyCount"
				>
					<el-input
						v-model.trim="ruleForm.proxyDailyCount"
						placeholder="请输入"
						maxlength="5"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
				</el-form-item>
				<el-form-item
					label="通过代理提款-每日累计提款额度:"
					prop="proxyDailyAmount"
				>
					<el-input
						v-model.trim="ruleForm.proxyDailyAmount"
						placeholder="请输入"
						maxlength="10"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
				</el-form-item>
				<el-form-item label="大额标记金额:" prop="bigAmount">
					<el-input
						v-model.trim="ruleForm.bigAmount"
						placeholder="请输入"
						maxlength="10"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
				</el-form-item>
				<el-form-item
					label="虚拟币提现手续费-TRC20协议:"
					prop="trcVirtualFee"
				>
					<el-input
						v-model.trim="ruleForm.trcVirtualFee"
						placeholder="请输入"
						maxlength="10"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
				</el-form-item>
				<el-form-item
					label="虚拟币提现手续费-ERC20协议:"
					prop="ercVirtualFee"
				>
					<el-input
						v-model.trim="ruleForm.ercVirtualFee"
						placeholder="请输入"
						maxlength="10"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
				</el-form-item>
				<el-form-item label="银行卡提现手续费:" prop="bankCardFee">
					<el-input
						v-model.trim="ruleForm.bankCardFee"
						placeholder="请输入"
						maxlength="10"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
				</el-form-item>
				<el-form-item label="白马会提现手续费:" prop="bmhFee">
					<el-input
						v-model.trim="ruleForm.bmhFee"
						placeholder="请输入"
						maxlength="10"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
				</el-form-item>
				<el-form-item label="易换提现手续费:" prop="yhFee">
					<el-input
						v-model.trim="ruleForm.yhFee"
						placeholder="请输入"
						maxlength="10"
						clearable
						v-input="{ name: 'num' }"
						class="input-class"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="default"
						@click="handleCloseRuleFormDialog('ruleForm')"
					>
						取消
					</el-button>
					<el-button
						type="primary"
						:loading="submitLoading"
						@click="submitForm('ruleForm')"
					>
						确定
					</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<GoogleKeyInput
			:isShowdialog="isShowdialog"
			@getGoogleKey="getGoogleKey($event)"
			@backPrevStep="backPrevStep()"
		></GoogleKeyInput>
	</div>
</template>

<script>
import MainContent from '@/components/MainContent/index.vue'
import list from '@/mixins/list'
export default {
	components: {
		MainContent,
		GoogleKeyInput: () => import('@/components/GoogleKeyInput')
	},
	mixins: [list],
	data() {
		return {
			isDefault: false,
			tableHeight: 480,
			merchantId: '',
			otherDependenComponents: [],
			form: {
				merchantId: null,
				username: ''
			},
			loading: false,
			submitLoading: false,
			ruleFormLoading: false,
			tableData: [],
			dialogRuleFormVisible: false,
			id: '',
			ruleFormType: '',
			ruleForm: {
				username: '',
				merchantId: '',
				dailyCount: '',
				dailyAmount: '',
				proxyDailyCount: '',
				proxyDailyAmount: '',
				bigAmount: '',
				trcVirtualFee: undefined,
				ercVirtualFee: undefined,
				bankCardFee: undefined,
				bmhFee: undefined,
				yhFee: undefined
			},
			rules: {
				username: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				merchantId: [
					{ required: true, message: '请选择', trigger: 'blur' }
				],
				dailyCount: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				dailyAmount: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				proxyDailyCount: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				proxyDailyAmount: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				bigAmount: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				trcVirtualFee: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				ercVirtualFee: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				bankCardFee: [
					{ required: true, message: '请输入', trigger: 'blur' }
				],
				bmhFee: [{ required: true, message: '请输入', trigger: 'blur' }],
				yhFee: [{ required: true, message: '请输入', trigger: 'blur' }]
			},
			isShowdialog: false,
			total: 0
		}
	},
	created() {
		this.form.merchantId = this.$store.getters.userInfo.merchantId
		if (this.form.merchantId === '0') {
			this.form.merchantId = null
		}
	},
	methods: {
		search() {
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			this.form = {}
			this.pageNum = 1
			this.pageSize = 100
			this.form.merchantId = null
			this.loadData()
		},
		loadData() {
			this.loading = true
			this.$api
				.getMemberWithdrawList({
					...this.form,
					userType: 0,
					...this.getParams()
				})
				.then((res) => {
					this.tableData = res.data.record || []
					this.total = res.data.totalRecord
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleAdd() {
			this.resetForm('ruleForm')
			this.ruleFormType = 'add'
			this.isDefault = false
			this.dialogRuleFormVisible = true
		},
		handleEdit(val) {
			this.resetForm('ruleForm')
			this.ruleFormType = 'edit'
			if (val.username === '默认') {
				this.isDefault = true
			} else {
				this.isDefault = false
			}
			this.merchantId = val.merchantId
			this.dialogRuleFormVisible = true
			this.id = val.id
			this.ruleFormLoading = true
			this.$api
				.queryMemberWithdrawConfig({
					id: this.id,
					userType: 0
				})
				.then((res) => {
					const data = res.data?.record?.[0] || {}
					this.ruleForm = {
						username: data.proxyName,
						merchantId: data.merchantId,
						dailyCount: data.dailyCount,
						dailyAmount: data.dailyAmount,
						proxyDailyCount: data.proxyDailyCount,
						proxyDailyAmount: data.proxyDailyAmount,
						bigAmount: data.bigAmount,
						trcVirtualFee: data.trcVirtualFee,
						ercVirtualFee: data.ercVirtualFee,
						bankCardFee: data.bankCardFee,
						bmhFee: data.bmhFee,
						yhFee: data.yhFee
					}
					this.ruleFormLoading = false
				})
				.catch((e) => {
					this.ruleFormLoading = false
				})
		},
		handleDel(val) {
			this.ruleFormType = 'del'
			this.id = val.id
			this.isShowdialog = true
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.isShowdialog = true
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		getGoogleKey(data) {
			this.isShowdialog = false
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})

			if (this.ruleFormType === 'add') {
				const params = {
					dailyCount: this.ruleForm.dailyCount,
					dailyAmount: this.ruleForm.dailyAmount,
					proxyDailyCount: this.ruleForm.proxyDailyCount,
					proxyDailyAmount: this.ruleForm.proxyDailyAmount,
					bigAmount: this.ruleForm.bigAmount,
					trcVirtualFee: this.ruleForm.trcVirtualFee,
					ercVirtualFee: this.ruleForm.ercVirtualFee,
					bankCardFee: this.ruleForm.bankCardFee,
					bmhFee: this.ruleForm.bmhFee,
					yhFee: this.ruleForm.yhFee,
					googleVerifyCode: data,
					username: this.ruleForm.username,
					merchantId: this.ruleForm.merchantId
				}
				this.submitLoading = true
				this.$api
					.addMemberWithdrawConfig(params)
					.then((res) => {
						this.$message({
							type: 'success',
							message: '新增成功!'
						})
						this.submitLoading = false
						this.dialogRuleFormVisible = false
						loading.close()
						this.loadData()
					})
					.catch((e) => {
						loading.close()
						this.submitLoading = false
					})
			} else if (this.ruleFormType === 'edit') {
				const params = {
					dailyCount: this.ruleForm.dailyCount,
					dailyAmount: this.ruleForm.dailyAmount,
					proxyDailyCount: this.ruleForm.proxyDailyCount,
					proxyDailyAmount: this.ruleForm.proxyDailyAmount,
					bigAmount: this.ruleForm.bigAmount,
					trcVirtualFee: this.ruleForm.trcVirtualFee,
					ercVirtualFee: this.ruleForm.ercVirtualFee,
					bankCardFee: this.ruleForm.bankCardFee,
					bmhFee: this.ruleForm.bmhFee,
					yhFee: this.ruleForm.yhFee,
					googleVerifyCode: data,
					id: this.id,
					userType: 0
				}
				this.submitLoading = true
				this.$api
					.updateMemberWithdrawConfig(params)
					.then((res) => {
						this.submitLoading = false
						loading.close()
						this.$message({
							type: 'success',
							message: '编辑成功!'
						})
						this.dialogRuleFormVisible = false
						this.loadData()
					})
					.catch((e) => {
						loading.close()
						this.submitLoading = false
					})
			} else if (this.ruleFormType === 'del') {
				this.$api
					.deleteMemberWithdrawConfig({
						id: this.id,
						googleVerifyCode: data
					})
					.then((res) => {
						loading.close()
						this.$message({
							type: 'success',
							message: '删除成功!'
						})
						this.loadData()
					})
					.catch((e) => {
						loading.close()
					})
			}
		},
		backPrevStep() {
			this.isShowdialog = false
		},
		resetForm(formName) {
			this.ruleForm = {
				username: '',
				merchantId: '',
				dailyCount: '',
				dailyAmount: '',
				proxyDailyCount: '',
				proxyDailyAmount: '',
				bigAmount: '',
				trcVirtualFee: undefined,
				ercVirtualFee: undefined,
				bankCardFee: undefined,
				bmhFee: undefined,
				yhFee: undefined
			}
		},
		handleCloseRuleFormDialog(formName) {
			this.dialogRuleFormVisible = false
		}
	}
}
</script>
<style lang="scss" scoped>
.input-class {
	width: 180px;
}
::v-deep.el-input-number .el-input__inner {
	text-align: left;
}
</style>
